<template>
	<view class="signList">
		<z-paging ref="paging" :refresher-out-rate="0.8" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" safe-area-inset-bottom bg-color="#FFF"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			empty-view-text="暂无内容" :refresher-status.sync="refresherStatus" auto-scroll-to-top-when-reload
			v-model="dataList" @query="queryList">
			<view class="top flex_wrap row_middle row_between">
				<view class="flex_wrap row_middle pepole">
					<u--image v-if="userDetails.avatar == 'null'" :src="`/static/img/conference/MissingAvatar.png`"
						shape="circle" width="80" height="80"></u--image>
					<u--image v-else :src="
                            userDetails.avatar ||
                            `/static/img/conference/MissingAvatar.png`
                        " shape="circle" width="80" height="80"></u--image>
					<view style="width: 36rpx"></view>
					<view class="flex_wrap flex_column left">
						<view>
							<u--text v-if="userDetails.nickName == 'null'" text="微信用户" color="#FFF" size="40rpx" />
							<u--text v-else :text="
                                    userDetails.nickName ||
                                    '微信用户'
                                " color="#FFF" size="40rpx" />
						</view>
						<view><u--text :text="userDetails.customerPhone" color="#FFF" size="28rpx" bold /></view>
					</view>
				</view>
			</view>
			<view class="cellBox">
				<view class="detail" v-for="(item, index) in dataList" :key="index"
					@click="toSignDetail(item.meetSignId)">
					<view class="detail_title">
						<view class="detail_title_right">
							<u-icon
								name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/079b353dd8eb47cb8a8b177255a5e5ef.png"
								size="40rpx" />
							<u-text :text="item.theme" bold size="36rpx" color="#333" margin="0 16rpx 0 20rpx" />
							<u-icon v-if="item.eventType == 'Sign In'"
								name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/3db62763f93a45edacbe75e84c2f9118.png"
								width="124rpx" height="40rpx" />
							<u-icon v-if="item.eventType == 'Sign Up'"
								name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/13/f884940478d64c8c88a7a671dc9edc41.png"
								width="124rpx" height="40rpx" />
						</view>
					</view>
					<view class="detail_time">
						<view class="detail_time_address">
							<u-icon name="map" size="36rpx" color="#0972E7" />
							<u-text :text="item.address" bold size="28rpx" color="#333" margin="0 0 0 20rpx" />
						</view>
						<view class="detail_time_now">
							<u-icon name="clock" size="34rpx" color="#0972E7" />
							<u-text :text="`${$u.timeFormat(
			                        item.startTime,
			                        'yy/mm/dd hh:MM'
			                    )} - ${$u.timeFormat(
			                        item.endTime,
			                        'yy/mm/dd hh:MM'
			                    )}`" color="#588BF3" size="28rpx" margin="0 0 0 20rpx" />
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		meetListByuser
	} from "@/api/salesmanMeeting.js";

	export default {
		data() {
			return {
				customerId: '',
				dataList: [],
				statusMap: {
					2: "待回寄",
					1: "待检测",
					9: "已完成",
				},
				userDetails: {}
			};
		},
		onLoad(options) {
			this.customerId = options.customerId;
			this.userDetails = options
		},

		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					salesmanId: this.customerId,
					pageNum: pageNo,
					pageSize: pageSize,
				};
				meetListByuser(params)
					.then((res) => {
						this.total = res.data.total;
						this.$refs.paging.completeByNoMore(res.data.rows, false);
					})
					.catch(() => {
						this.$refs.paging.complete(false);
					});
			},
			toSignDetail(meetSignId) {
				uni.$u.route({
					url: '/pages_my/user_manage/meetList/detail',
					params: {
						signUpId: meetSignId,
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.signList {
		::v-deep.u-line {
			height: auto !important;
		}

		position: relative;
	}

	.pepole {
		padding-left: 80rpx;
		padding-bottom: 64rpx;
	}

	.top {
		height: 372rpx;
		width: 100%;
		box-sizing: border-box;
		background-image: url("@/static/img/conference/userDetailsbg.png");
		background-size: cover;
	}

	.cellBox {
		width: 92vw;
		margin: 60rpx auto 0;

		::v-deep .u-cell {
			box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
			margin-top: 32rpx;
			border-radius: 20upx;
		}

		::v-deep .u-cell__body {}
	}

	.detail {
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 10rpx auto 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

		&_title {
			width: 100%;
			padding: 8rpx 24rpx 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #dfdfdf;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_right {
				display: flex;
				align-items: center;
			}
		}

		&_time {
			padding: 30rpx 32rpx 12rpx;

			&_now {
				padding-left: 12rpx;
				margin-top: 24rpx;
				height: 76rpx;
				background: #eef9ff;
				border-radius: 4rpx;
				display: flex;
				align-items: center;
			}

			&_address {
				padding-left: 12rpx;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
